<template>
	<view class="page">
		<image class="bgImg" :src="imgBaseUrl+'/images/login/bg.png'" mode=""></image>
		<view class="content">
			<!-- #ifdef MP-WEIXIN -->
			<!-- <view class="form">
				<view class="row">
					<u-input color="#0072e6" :placeholder="language.login.nameText" v-model="form.userName"
					:placeholderStyle="{ color: '#0072e6'}"   >
						<template slot="prefix">
							<image class="icon" :src="imgBaseUrl+'/images/login/person.png'" mode="widthFix"></image>
						</template>
					</u-input>	
				</view>
				<view class="row">
					<u-input color="#0072e6" :placeholder="language.login.pwdText"  v-model="form.password" type="password"
					:placeholderStyle="{ color: '#fff'}"   >
						<template slot="prefix">
							<image class="icon" :src="imgBaseUrl+'/images/login/code.png'" mode="widthFix"></image>
						</template>
					</u-input>	
				</view>
				<view class="nextBtn" @click="handleBind()">
					{{language.login.button}}
				</view>
			</view> -->
			<view class="form">
				<view class="row">
					<u-input color="#0072e6" :placeholder="language.login.nameText" v-model="form.userName"
					:placeholderStyle="{ color: '#0072e6'}"   >
						<template slot="prefix">
							<image class="icon" :src="imgBaseUrl+'/images/login/person.png'" mode="widthFix"></image>
						</template>
					</u-input>	
				</view>
				<view class="row">
					<u-input color="#0072e6" :placeholder="language.login.phoneText"  v-model="form.phone" type="number"
					:placeholderStyle="{ color: '#0072e6'}"   >
						<template slot="prefix">
							<image class="icon" :src="imgBaseUrl+'/images/login/phone.png'" mode="widthFix"></image>
						</template>
					</u-input>	
				</view>
				<view class="row">
					<u-input color="#0072e6" :placeholder="language.login.codeText" v-model="form.smscode"
					:placeholderStyle="{ color: '#0072e6'}"   >
						<template slot="prefix">
							<image class="icon" :src="imgBaseUrl+'/images/login/code.png'" mode="widthFix"></image>
						</template>
					</u-input>
					<view class="sendBtn" @click="handleSendCode">
						{{sendText}}
					</view>
					
				</view>
				<view class="nextBtn" @click="handleBind()">
					{{language.login.button}}
				</view>
			</view>
			<u-code :seconds="60"  ref="uCode" @change="codeChange" @end="sendEnd"></u-code>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="form">
				<view class="row">
					<u-input color="#0072e6" :placeholder="language.login.nameText" v-model="form.userName"
					:placeholderStyle="{ color: '#0072e6'}"   >
						<template slot="prefix">
							<image class="icon" :src="imgBaseUrl+'/images/login/person.png'" mode="widthFix"></image>
						</template>
					</u-input>	
				</view>
				<view class="row">
					<u-input color="#0072e6" :placeholder="language.login.pwdText"  v-model="form.password" type="password"
					:placeholderStyle="{ color: '#0072e6'}"   >
						<template slot="prefix">
							<image class="icon" :src="imgBaseUrl+'/images/login/code.png'" mode="widthFix"></image>
						</template>
					</u-input>	
				</view>
				<view class="nextBtn" @click="handleBind()">
					{{language.login.button}}
				</view>
			</view>
			<!-- #endif -->
			
			
			<view class="" style="margin:50rpx 50rpx 0;justify-content: center;align-items: center;color: #c9caca;">
					<label>
				 		<checkbox color="#0072e6" style="transform:scale(0.7)" value="cb" :checked="selectBool" @click="slectChange" />
					</label>
			        {{language.login.tip1}}<text @click="goPage('/pages/componentsA/bingInfo/agreement')"
			          style="color:#0072e6;" >{{language.login.tip2}}</text>{{language.login.tip3}}
			          <text  @click="goPage('/pages/componentsA/bingInfo/agreement')"
			          style="color:#0072e6;" >{{language.login.tip4}}</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {miniLoginApi,sendsmsApi,oaLoginApi} from '@/common/api/commonApi/commonApi.js'
	export default {
		data() {
			return {
				stepNumber : 1,
				form: {
					userName : '',
					phone: '',
					smscode : '',
					password : '',
					unionid : uni.getStorageSync('unionid'),
					oaopenid: uni.getStorageSync('oaopenid'),
				},
				schoolList: [
					[]
				],
				remberInfo: '',
				selectSchoolShow: false,
				sendText: '获取验证码',
				selectBool: false,
				disableBtn : false,
			}
		},
		methods: {
			codeChange(text) {
				this.sendText = text;
			},
			sendEnd(){
				this.sendText = '获取验证码'
				this.disableBtn = false
			},
			slectChange(){
				this.selectBool = true
				console.log(this.selectBool);
			},
			handleSendCode(){
				if(!this.form.userName) return this.setMessage('请输入姓名')
				if(!this.form.phone) return this.setMessage('请输入手机号')
				if(this.disableBtn) return this.setMessage('验证码已发送请稍后再获取！')
				sendsmsApi({
					phone: this.form.phone,
					userName: this.form.userName,
				}).then(res=>{
					// this.sendText = '重新发送'
					this.selectBool = true
					this.setMessage('发送成功！')
					this.disableBtn = true
					this.$refs.uCode.start();
				})
			},
			handleBind(){
				// if(!this.selectBool) return this.setMessage('请先勾选已阅读并同意<<服务协议>>和<<隐私协议>>')
				if(!this.form.userName) return this.setMessage('请输入姓名')
			
				// #ifdef H5
					if(!this.form.password) return this.setMessage('请输入密码')
						oaLoginApi({
							userName: this.form.userName,
							password: this.form.password,
							oaopenid: this.form.oaopenid,
						}).then(res=>{
							if(!res.result) {
								return this.setMessage(res.message)
							}
							this.setMessage('登录成功')
							uni.setStorageSync('selectInfoAccount',res.result.personInfo)
							uni.setStorageSync('token',res.result.token)
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/index/index'
								})
							},1500)
							
						})
				// #endif
				// #ifdef MP-WEIXIN
					if(!this.form.phone) return this.setMessage('请输入手机号')
					if(!this.form.smscode) return this.setMessage('请输入验证码')
					miniLoginApi(this.form).then(res=>{
						if(!res.result) {
							return this.setMessage(res.message)
						}
						this.setMessage('登录成功')
						uni.setStorageSync('selectInfoAccount',res.result.personInfo)
						uni.setStorageSync('token',res.result.token)
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages/index/index'
							})
						},1500)
						
					})
				
				// if(!this.form.password) return this.setMessage('请输入密码')
				// 	oaLoginApi({
				// 		userName: this.form.userName,
				// 		password: this.form.password,
				// 		oaopenid: this.form.oaopenid,
				// 	}).then(res=>{
				// 		if(!res.result) {
				// 			return this.setMessage(res.message)
				// 		}
				// 		this.setMessage('登录成功')
				// 		uni.setStorageSync('selectInfoAccount',res.result.personInfo)
				// 		uni.setStorageSync('token',res.result.token)
				// 		setTimeout(()=>{
				// 			uni.reLaunch({
				// 				url:'/pages/index/index'
				// 			})
				// 		},1500)
						
				// 	})
				// #endif
			},
		},
		computed: {
			// i18n() {
			// 	return this.$t('index')
			// }
		},
		onLoad() {
			console.log(this.language);
			// console.log(this.$t("login.button"));
		},
		onShow() {
			uni.$on('selectUser',(res)=>{
				console.log(res);
				this.form.studentNum = res.memberNo
			})
		},
	}
</script>

<style lang="scss" scoped>

/deep/ .u-input{
	border-bottom: 2rpx solid #dfdfdf;
	border-radius: 0 !important;
	height: 100%;
}

/deep/ .placeholderStyle{
	// color: #fff;
}

	
.page{
	// height: 100vh;
	background: #fff;
	position: relative;
	.bgImg{
		position: absolute;
		top: 0;
		left: 0;
		height: 100vh;
	}
	.content{
		position: relative;
		z-index: 10;
		padding-top: 780rpx;
		color: #0072e6;
		// background-color: pink;
		.form{
			padding: 0 60rpx;
			.row{
				height: 120rpx;
				display: flex;
				align-items: center;
				.icon{
					width: 32rpx;
					height: 32rpx;
					margin-right:  20rpx;
				}
				.sendBtn{
					width: 170rpx;
					color: #4188f0;
					font-size: 24rpx;
					height: 84rpx;
					background-color: #fff;
					@include flexCenter;
					border-radius: 40rpx;
					margin-left: 10rpx;
				}
			}
			.tips{
				text-align: right;
				margin-top: 24rpx;
			}
			.nextBtn{
				width: 440rpx;
				height: 80rpx;
				color: #fff;
				border-radius: 40rpx;
				text-align: center;
				background-color: #fff;
				line-height: 80rpx;
				font-size: 34rpx;
				margin: 40rpx auto 0;
				background: linear-gradient(to bottom, #00d973, #087dde);
			}
			.btnRow{
				display: flex;
				.btn{
					width: 240rpx;
					height: 80rpx;
					color: #4188f0;
					border-radius: 40rpx;
					text-align: center;
					background-color: #fff;
					line-height: 80rpx;
					font-size: 34rpx;
					margin-top: 40rpx;
					margin-right: 25rpx;
					&:nth-child(2){
						margin-right: 0;
					}
				}
				
			}
		}
		
	}
}
</style>
